<template>
    <div>
        <div class="listItmTop"></div>
        <div class="listItm">
            <div class="listFlex main" style="padding-left: 22upx;">
                <div class="listLeft36">丈夫信息</div>
                <div class="listRight"></div>
            </div>
        </div>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">
                    <span class="mustCheck__content">*</span>丈夫姓名
                </div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            :disabled="disabled"
                            maxlength="10"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            placeholder="请填写"
                            v-model="userInf.chineseName "
                        />
                    </span>
                </div>
            </div>
        </div>
        <picker
            class="listItm"
            v-if="array"
            :disabled="disabled"
            @change="cartChange"
            :value="index0"
            range-key="name"
            :range="documentType"
        >
            <div class="listFlex main">
                <div class="listLeft">
                    <span class="mustCheck__content">*</span>证件类型
                </div>
                <div class="listRight" v-if="index0&&documentType[index0]">
                    <span
                        class="listCheckT"
                        v-if="documentType[index0].name"
                    >{{documentType[index0].name}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">
                    <span class="mustCheck__content">*</span>证件号码
                </div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            :disabled="disabled"
                            maxlength="18"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            placeholder="请填写"
                            v-model="userInf.idNumber"
                            @blur="inputT3"
                        />
                    </span>
                    <span class="weui-cell__ft_in-access hiddenCom"></span>
                </div>
            </div>
        </div>
        <picker
            :disabled="disabled"
            :end="endTime"
            class="listItm"
            mode="date"
            @change="birthdayChange"
        >
            <div class="listFlex main">
                <div class="listLeft">出生日期</div>
                <div class="listRight" v-if="userInf.birthday">
                    <span class="listCheckT">{{ issubstring(userInf.birthday) }}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <picker
            class="listItm"
            v-if="array"
            :disabled="disabled"
            @change="nationChange"
            :value="index1"
            range-key="name"
            :range="nationality"
        >
            <div class="listFlex main">
                <div class="listLeft">国籍</div>
                <div class="listRight" v-if="index1&&nationality[index1]">
                    <span
                        class="listCheckT"
                        v-if="nationality[index1].name"
                    >{{nationality[index1].name}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <picker
            class="listItm"
            v-if="array"
            @change="ethnicChange"
            :disabled="disabled"
            :value="index2"
            range-key="name"
            :range="ethnicA"
        >
            <div class="listFlex main">
                <div class="listLeft">民族</div>
                <div class="listRight" v-if="index2&&ethnicA[index2]">
                    <span class="listCheckT" v-if="ethnicA[index2].name">{{ethnicA[index2].name}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <picker
            class="listItm"
            v-if="array"
            :disabled="disabled"
            @change="edulevelChange"
            :value="index3"
            range-key="name"
            :range="edulevelA"
        >
            <div class="listFlex main">
                <div class="listLeft">文化程度</div>
                <div class="listRight" v-if="index3&&edulevelA[index3]">
                    <span
                        class="listCheckT"
                        v-if="edulevelA[index3].name"
                    >{{edulevelA[index3].name}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <picker
            class="listItm"
            v-if="array"
            @change="jobChange"
            :disabled="disabled"
            :value="index4"
            range-key="name"
            :range="jobA"
        >
            <div class="listFlex main">
                <div class="listLeft">职业</div>
                <div class="listRight" v-if="index4&&jobA[index4]">
                    <span class="listCheckT" v-if="jobA[index4].name">{{jobA[index4].name}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <picker
            class="listItm"
            :disabled="disabled"
            v-if="region"
            @change="placeChange"
            mode="region"
            :value="region"
        >
            <div class="listFlex main">
                <div class="listLeft">籍贯</div>
                <div class="listRight" v-if="region[0]">
                    <span class="listCheckT" v-if="show">{{region[0]+','}}{{region[1]}}</span>
                    <span class="listCheckT" v-else>{{region[0]}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>

        <picker
            class="listItm"
            v-if="region2"
            @change="houseAChange"
            mode="region"
            :disabled="disabled"
            :value="region2"
        >
            <div class="listFlex main">
                <div class="listLeft">户口所在地</div>
                <div class="listRight" v-if="region2[0]">
                    <span class="listCheckT" v-if="show2">{{region2[0]+','}}{{region2[1]}}</span>
                    <span class="listCheckT" v-else>{{region2[0]}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <picker
            class="listItm"
            v-if="array"
            @change="nationTypeChange"
            :disabled="disabled"
            :value="index5"
            range-key="name"
            :range="nationTypeA"
        >
            <div class="listFlex main">
                <div class="listLeft">户籍类型</div>
                <div class="listRight" v-if="index5&&nationTypeA[index5]">
                    <span
                        class="listCheckT"
                        v-if="nationTypeA[index5].name"
                    >{{nationTypeA[index5].name}}</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
                <div class="listRight" v-else>
                    <span class="listCheckT">请选择</span>
                    <span class="weui-cell__ft_in-access"></span>
                </div>
            </div>
        </picker>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">工作单位</div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            :disabled="disabled"
                            maxlength="20"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            placeholder="请填写"
                            v-model="userInf.husbandWorkplace"
                        />
                    </span>
                </div>
            </div>
        </div>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">有无吸烟</div>
                <div class="listRight">
                    <span class="listCheckT">
                        <radio-group @change="smokingradioChange">
                            <span class="listradio">
                                <radio
                                    class="pink"
                                    value="1"
                                    :disabled="disabled"
                                    :checked="issmoking=='1'"
                                    color="#F75193"
                                >是</radio>
                            </span>
                            <span class="listradio">
                                <radio
                                    class="pink"
                                    value="2"
                                    :disabled="disabled"
                                    :checked="issmoking=='2'"
                                    color="#F75193"
                                >否</radio>
                            </span>
                        </radio-group>
                    </span>
                </div>
            </div>
        </div>
        <div class="listItm" v-if="issmoking==1">
            <div class="listFlex main">
                <div class="listLeft">吸烟量(支/天)</div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            maxlength="3"
                            @input="inputNumber"
                            :disabled="disabled"
                            placeholder="请填写"
                            v-model="disgustingHabit.smoking"
                        />
                    </span>
                </div>
            </div>
        </div>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">有无饮酒</div>
                <div class="listRight">
                    <span class="listCheckT">
                        <radio-group @change="isdrinkingChange">
                            <span class="listradio">
                                <radio
                                    class="pink"
                                    value="1"
                                    :checked="isdrinking==1"
                                    :disabled="disabled"
                                    color="#F75193"
                                >是</radio>
                            </span>
                            <span class="listradio">
                                <radio
                                    class="pink"
                                    value="2"
                                    :checked="isdrinking==2"
                                    :disabled="disabled"
                                    color="#F75193"
                                >否</radio>
                            </span>
                        </radio-group>
                    </span>
                </div>
            </div>
        </div>
        <div class="listItm" v-if="isdrinking==1">
            <div class="listFlex main">
                <div class="listLeft">饮酒量(两/天)</div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            :disabled="disabled"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            maxlength="3"
                            @input="inputNumber"
                            placeholder="请填写"
                            v-model="disgustingHabit.drinking"
                        />
                    </span>
                </div>
            </div>
        </div>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">其他嗜好</div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            @input="inputhanz"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            maxlength="10"
                            :disabled="disabled"
                            placeholder="请填写"
                            v-model="disgustingHabit.otherHobbies"
                        />
                    </span>
                </div>
            </div>
        </div>
        <div class="listItm">
            <div class="listFlex main">
                <div class="listLeft">
                    <span class="mustCheck__content">*</span>手机号码
                </div>
                <div class="listRight">
                    <span class="listCheckT">
                        <input
                            type="text"
                            placeholder-style="color: #999;"
                            class="inputStyle"
                            maxlength="11"
                            :disabled="disabled"
                            placeholder="请填写"
                            v-model="userInf.mobile"
                            @blur="inputT31"
                        />
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInf: {
                chineseName: ""
            },
            bottom: null,
            inputA: "",
            index0: "",
            index1: "",
            index2: "",
            index3: "",
            index4: "",
            index5: "",
            // 1：选择列表
            documentType: [],
            nationality: [], // 国籍
            ethnicA: [],
            edulevelA: [],
            issmoking: "2",
            isdrinking: "2",
            disgustingHabit: {
                smoking: null, //抽烟
                drinking: null, //喝酒
                otherHobbies: "" //其他
            }, //不良嗜好
            jobA: [],
            nationTypeA: [],
            region: ["", "", ""], // 籍贯
            show: true,
            region1: ["", "", ""], //现住地址
            show1: true,
            region2: ["", "", ""], // 户口所在地
            show2: true,
            region3: ["", "", ""], // 产后休养地
            show3: true,
            userInf: {
                idType: 1, // 证件类型
                idNumber: null, // 证件号码
                birthday: "", //出生日期
                nationality: null, // 国籍
                ethnic: null, // 民族
                education: null, // 文化程度
                career: null, // 职业
                householdRegistrationType: null, // 户籍类型
                // 籍贯
                province: null, // 省
                cities: null, // 市
                // 户口所在地
                householdProvince: null, // 省
                householdCity: null, // 市
                // 现住址
                addressProvince: null, // 省
                addressCity: null, // 市
                address: null // 详细
            }
        };
    },
    props: {
        array: {
            type: Object,
            required: true
        },
        disabled: {
            type: Boolean
        },
        userInflist: {
            type: Object
        },
        newlybuild: {
            type: String
        },
        endTime: {
            type: String
        }
    },
    mounted() {
        var _this = this;
        _this.documentType = _this.array.documentType;
        _this.nationality = _this.array.nationality;
        _this.ethnicA = _this.array.ethnicA;
        _this.edulevelA = _this.array.edulevelA;
        _this.jobA = _this.array.jobA;
        _this.nationTypeA = _this.array.nationTypeA;
        _this.userInf = _this.userInflist.husbandInfo;
        if (!_this.userInf) {
            _this.userInf = {};
        }
        if (_this.userInf.idType) {
            _this.index0 = _this.userInf.idType - 1 + "";
        }
        if (_this.userInf.nationality) {
            _this.index1 = _this.userInf.nationality - 1 + "";
        }
        if (_this.userInf.ethnic) {
            _this.index2 = _this.userInf.ethnic - 1 + "";
        }
        if (_this.userInf.education) {
            _this.index3 = _this.userInf.education - 1 + "";
        }
        if (_this.userInf.career) {
            _this.index4 = _this.userInf.career - 1 + "";
        }
        if (_this.userInf.province && _this.userInf.cities) {
            _this.region = [_this.userInf.province, _this.userInf.cities];
            if (_this.userInf.province == _this.userInf.cities) {
                _this.show = false;
            } else {
                _this.show = true;
            }
        }
        if (_this.userInf.householdProvince && _this.userInf.householdCity) {
            _this.region2 = [
                _this.userInf.householdProvince,
                _this.userInf.householdCity
            ];
            if (
                _this.userInf.householdProvince == _this.userInf.householdCity
            ) {
                _this.show2 = false;
            } else {
                _this.show2 = true;
            }
        }
        if (_this.userInf.householdRegistrationType) {
            _this.index5 = _this.userInf.householdRegistrationType - 1 + "";
        }
        if (_this.userInf.disgustingHabit) {
            _this.disgustingHabit = JSON.parse(_this.userInf.disgustingHabit);
            if (_this.disgustingHabit.smoking) {
                _this.issmoking = "1";
            }
            if (_this.disgustingHabit.drinking) {
                _this.isdrinking = "1";
            }
        }
        if (_this.newlybuild == "新建") {
            _this.index0 = "0"; //身份证
            _this.index1 = "0"; //国籍
            _this.index2 = "0"; //民族
            _this.userInf.idType = "1"; //身份证
            _this.userInf.sex = "1"; //性别男
            _this.userInf.nationality = "1"; //国籍
            _this.userInf.ethnic = "1"; //民族
            _this.userInf.pregnantId = null;
        }
    },
    methods: {
        zhangfcheckField(name, field, vaule) {
            //字段验证
            var _this = this;
            var data = {
                field: field,
                vaule: vaule
            };
            _this.$ajaxs
                .get("/mobile/v1/pregnant/checkField", data)
                .then(res => {
                    if (res.content) {
                        if (_this.userInf.husbandId != res.content.id) {
                            return uni.showToast({
                                title: name + "已存在",
                                icon: "none"
                            });
                        }
                    }
                })
                .catch(err => reject(err));
        },
        inputT31() {
            var _this = this;
           if(!_this.userInf.mobile) return
            const reg = /^1[0-9][0-9]\d{8}$/;
            if (!reg.test(_this.userInf.mobile)) {
                return uni.showToast({
                    title: "手机号格式错误！",
                    icon: "none"
                });
            }
            _this.zhangfcheckField(
                "丈夫手机号码",
                "mobile",
                _this.userInf.mobile
            );
        },
        inputNumber(e) {
            var _this = this;
            if (e.detail.value) {
                const reg = /^[+]{0,1}(\d+)$/;
                if (!reg.test(e.detail.value)) {
                    return uni.showToast({
                        title: "请输入整数",
                        icon: "none"
                    });
                }
            }
            //
        },
        inputhanz(e) {
            var _this = this;
            if (e.detail.value) {
                const reg = new RegExp("^([\u4E00-\uFA29]|[\uE7C7-\uE7F3])*$");
                if (!reg.test(e.detail.value)) {
                    return uni.showToast({
                        title: "请输入汉字",
                        icon: "none"
                    });
                }
            }
            //
        },
        getfrom() {
            var _this = this;
            _this.userInf.disgustingHabit = JSON.stringify(
                _this.disgustingHabit
            );
            return _this.userInf;
        },
        issubstring(itm) {
            if (itm) {
                return itm.substring(0, 10);
            } else {
                return "";
            }
        },
        getInf() {
            var _this = this;
            if (_this.userInf.idType) {
                _this.index0 = _this.userInf.idType - 1 + "";
            }
        },
        radioChange(e) {
            // console.log(e);
        },
        previous() {},
        handleClick() {},
        inputT3(e) {
            var _this = this;
            this.userInf.idNumber = e.detail.value; // 证件号码
            if (this.userInf.idType == 1) {
                this.userInf.birthday = this.getBirthdayFromIdCard(
                    this.userInf.idNumber
                );
                const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(!_this.userInf.idNumber) return
                if (!reg.test(_this.userInf.idNumber)) {
                    return uni.showToast({
                        title: "证件号格式错误！",
                        icon: "none"
                    });
                }
                this.zhangfcheckField(
                    "丈夫证件号码",
                    "idNumber",
                    _this.userInf.idNumber
                );
            }
        },
        birthdayChange(e) {
            var _this = this;
            this.$set(this.userInf, "birthday", e.detail.value);
        },
        getBirthdayFromIdCard(idCard) {
            var birthday = "";
            if (idCard != null && idCard != "") {
                if (idCard.length == 15) {
                    birthday = "19" + idCard.substr(6, 6);
                } else if (idCard.length == 18) {
                    birthday = idCard.substr(6, 8);
                }
                birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
            }

            return birthday;
        },
        inputT1(e) {},
        cartChange(e) {
            // 证件类型
            this.index0 = e.target.value;
            this.userInf.idType = e.target.value - 0 + 1 + "";
        },
        nationChange(e) {
            // 国籍
            this.index1 = e.target.value;
            this.userInf.nationality = e.target.value - 0 + 1 + "";
        },
        ethnicChange(e) {
            this.index2 = e.target.value;
            this.userInf.ethnic = e.target.value - 0 + 1 + "";
        },
        edulevelChange(e) {
            this.index3 = e.target.value;
            this.userInf.education = e.target.value - 0 + 1 + "";
        },
        jobChange(e) {
            this.index4 = e.target.value;
            this.userInf.career = e.target.value - 0 + 1 + "";
        },
        placeChange(e) {
            this.region = e.target.value;
            this.userInf.province = e.target.value[0];
            this.userInf.cities = e.target.value[1];
            if (this.userInf.province == this.userInf.cities) {
                this.show = false;
            } else {
                this.show = true;
            }
        },
        houseChange(e) {
            this.region1 = e.target.value;
            this.userInf.addressProvince = e.target.value[0];
            this.userInf.addressCity = e.target.value[1];
            if (this.userInf.addressProvince == this.userInf.addressCity) {
                this.show1 = false;
            } else {
                this.show1 = true;
            }
        },
        houseAChange(e) {
            this.region2 = e.target.value;
            this.userInf.householdProvince = e.target.value[0];
            this.userInf.householdCity = e.target.value[1];
            if (this.userInf.householdProvince == this.userInf.householdCity) {
                this.show2 = false;
            } else {
                this.show2 = true;
            }
        },
        chanhouChange(e) {},
        nationTypeChange(e) {
            this.index5 = e.target.value;
            this.userInf.householdRegistrationType =
                e.target.value - 0 + 1 + "";
        },
        smokingradioChange(e) {
            this.issmoking = e.target.value;
        },
        isdrinkingChange(e) {
            this.isdrinking = e.target.value;
        },
        //排序方法
        compare(property) {
            return function(a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value1 - value2;
            };
        }
    }
};
</script>